<template>
	<view class="box">
	
		<view>
			<u-tabs-swiper ref="tabs1" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				active-color="#fc562f" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiperBox">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y @scrolltolower="onreachBottom" lower-threshold="10"
					:style="{height: boxHeight + 'px'}">
					<view class="orderTotal" v-if="item.list.length>0">
						<view class="orderItem container_br" v-for="(order,index) in item.list" :key="index"
							@click="goDetail(order.id)">
							<view class="status">
								<span v-if="order.status==0">待付款</span>
								<span v-if="order.status==1">待发货</span>
								<span v-if="order.status==2">待收货</span>
								<span v-if="order.status==3">已完成</span>
								<span v-if="order.status==4">退款中</span>
								<span v-if="order.status==5">退款完成</span>
								<span v-if="order.status==-1">已取消</span>
								<span v-if="order.status==-2">拒绝退款</span>
							</view>
							<view class="item flc" v-for="(c,index) in order.goods" :key="index">
								<view class="left">
									<image :src="c.goods_images_format[0]" mode="widthFix" style="width: 160rpx;"></image>
								</view>
								<view class="right">
									<view class="name">
										{{c.goods_name}}
									</view>
									<view class="price">
										￥{{c.goods_price}}
									</view>
								</view>
							</view>
							<view class="bottom">
								实付款：￥{{order.pay_amount}}
							</view>
						</view>
						<u-loadmore :status="status" @loadmore="loadmore" />
						<view class="H100">

						</view>
					</view>
					<view class="noData" style="width: 410rpx;height: 240rpx; margin: 60rpx auto;" v-else>
						<image src="/static/empty.png" mode="widthFix" style="width: 410rpx;"></image>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import {
		getStorestat
	} from '../../api/user';
	export default {
		data() {
			return {
				boxHeight: wx.getSystemInfoSync().windowHeight - 48 - 37,
				user_id: "",
				page: 1,
				list: [{
						name: '全部',
					}, {
						name: '待支付',
					}, {
						name: '待发货',

					}, {
						name: '待收货',
					},
					{
						name: '已完成',
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs: [{
						id: '1',
						list: []
					}, {
						id: '2',
						list: []
					}, {
						id: '3',
						list: []
					},
					{
						id: '4',
						list: []
					},
					{
						id: '5',
						list: []
					}
				], // 要展示的业务数据列表
				status: 'loadmore',

			};
		},
		onLoad(res) {
			console.log("开始", res);

			this.tabsChange(Number(res.index)+1)
		},

		methods: {
			init(index) {
				this.status = 'loading'
				getStorestat({
					status: index==66?"":`${index}`
				}).then(res => {
					console.log(res,index);
					if(index!=66){
						index= Number(index)+1
						console.log("下标",index);
						this.tabs[index].list = res.data
					}else{
						this.tabs[0].list = res.data
					}
					
					
						this.status = 'nomore'
					

				})
			},
			onreachBottom() {
				console.log("加载");
				// if (this.status == 'loadmore') {
				// 	this.page++
				// 	this.getdata(this.swiperCurrent)
				// } else {
				// 	toast("没有更多了")
				// }
			},
			tabsChange(index) {
				this.getdata(index)
				setTimeout(() => {
					this.swiperCurrent = index;
				}, 100)

			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs1.setDx(dx);
			},

			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs1.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			loadmore() {
				if (this.status == 'loadmore') {
					this.page++
					this.getdata(this.swiperCurrent)
				} else {
					toast("没有更多了")
				}
			},
			getdata(index) {
				console.log("hhh", index);
				this.tabs[index].list = []
				this.status = 'loading'
				if(index==0){
					index=66
					this.init(index)
				}
				if(index==1){
					index--
					this.init(index)
				}
				if(index==2){
					index--
					this.init(index)
				}
				if(index==3){
					index--
					this.init(index)
				}
				if(index==4){
					index--
					this.init(index)
				}

			},
			goDetail(id) {
				uni.navigateTo({
					url:'/page/McorderDetail/McorderDetail?id='+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiperBox {
		height: 1360rpx;
	}
	.orderItem {
		.status{
			display: flex;
			flex-direction: row-reverse;
		}
		.item{
			.left{
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
			}
			.right{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
			}
			.right .price{
				color: #FA453C;
				font-size: 26rpx;
			}
			.right .name{
				font-size: 28rpx;
				color: #333;
			}
				
			
		}
		.bottom{
			padding: 15rpx 0;
			border-top: 1rpx solid #dedede;
			text-align: right;
			
		}
	}
</style>